<template>
  <div class="zjbox">
    <appdialog
    	ref="dialog"
			:visible="false" 
			title="新增组件"
			width="50%"
			@confirm="confirmAdd"
			@cancle="cancleAdd">
      <el-form :model="formData" ref="RuleFrom"  label-width="100px" :rules="Rules" style="margin:20px;">
          <el-form-item label="文件上传：" prop="filePath">
            	<webUploader 
              :options="{accept:'.zip'}" 
              @success="uploadSuccess"
              ></webUploader>
              <el-button 
							  @click="handleGetFile"
								size="mini">
								<i class="iconfont icon-shangchuan"></i>
								服务器拉取
							</el-button>
              <span v-if="uploadFromData.fileName">{{uploadFromData.fileName}}&nbsp;&nbsp;</span>
          </el-form-item>
          
          <el-form-item label="组件类型："  prop="appType">
			  			<yingyongTypeSelect 
              :type="1" 
              ref="yingyongTypeSelect"
              @change="changeAppType"></yingyongTypeSelect>
          </el-form-item>

          <el-form-item label="部署模式：" prop="deployModel" v-if="deployModelList.length">
              <el-radio-group  @change="changeDeployModel" v-model="formData.modelName">
                <el-radio v-for="item in deployModelList" :key="item.label"  :label="item.modelName"></el-radio>
              </el-radio-group>
          </el-form-item>

          <el-form-item label="组件名称：" prop="name">
			  		<!-- <baseInput  ref="zujianname" placeholder="请输入组件名称" :defaultValue="formData.name" @change="(name,v)=>{this.formData.name=v}"></baseInput> -->
            	<nameInput @change="(name,v)=>{this.formData.name=v}" ref="zujianname"  
						></nameInput>
          </el-form-item>

          <el-form-item label="组件版本：" prop="appVersion">
			  		<!-- <baseInput  ref="zujianversion" placeholder="请输入组件版本" :defaultValue="formData.appVersion" @change="(name,v)=>{this.formData.appVersion=v}"></baseInput> -->
            	 <nameInput @change="(name,v)=>{this.formData.appVersion=v}" ref="zhujianVers"  
						></nameInput>
          </el-form-item>

          <el-form-item label="描述信息：" prop="description">
	  		    <appTextarea  :defaultValue="formData.description"  @change="(name,v)=>{this.formData.description=v}" ref="appTextarea"></appTextarea>
          </el-form-item>
           
          环境变量
          <hr>
          <env
          	ref="env"
			  		:readOnly="false"
            :autoAddList="false"
			  		@change="envConfigsChange"></env>
      </el-form>
    </appdialog>

    <upload-dialog 	ref="uploaddialog" @addSucess="addSucess"></upload-dialog>
  </div>
</template>


<script>
import appdialog from "@/view/components/dialog/dialog";
import yingyongTypeSelect from "@/view/components/select/yingyongTypeSelect";
import baseInput from "@/view/components/input/input";
import nameInput from "@/view/components/input/nameInput";

import webUploader from "@/view/components/upload/webUploader";
import uploadDialog from "@/view/components/dialog/uploadDialog";

import appTextarea from "@/view/components/textarea/textArea";
import env from "../common/env" ;
import {validateNumAndEn} from "@/utils/validate"

import {build} from "@/service/swagger/AppBuilderController";
import {deploymodels} from "@/service/swagger/AcTemplateController"
  export default{
    components:{
       yingyongTypeSelect,
       appdialog,
       baseInput,
       appTextarea,
       env,
       nameInput,
       webUploader,
       uploadDialog
    },
    data(){
      return{
        formData:{
          appType : "", // 组件类型
          modelName:"",//部署模式名字
          deployModel:'',//发布模式
          name : "", //组件名称
          appVersion : "", // 组件版本
          description : "",//描述
          filePath:"",//上传文件路径
        },
        
        uploadFromData : {
          repositoryType : "file",
          filePath : "",
          fileName : "",
          fileSize : "",
        },
        deployModelList : [],
        Rules:{
          appType:[{ required: true, message: '请选择应用类型', trigger: 'change' }],
          name : [
            { required: true, validator: (rule, value, callback) => {
                if (!value) {
                  callback('请输入应用名称')
                } else if (!validateNumAndEn(value)) {
                  callback('请按照正确的格式填写：英文/数字')
                } else {
                  callback()
                }
              }, trigger: 'blur' }
            ],
          appVersion : [{ required: true, message: '请输入版本', trigger: 'blur' }],
          filePath: [{ required: true, message: '请上传文件', trigger: 'blur' }],
        }
      }
    },
    methods:{
      uploadSuccess(name,{res,file}){
        this.formData.filePath = res.data.filePath
        this.uploadFromData= {
          repositoryType : "file",
          filePath : res.data.filePath,
          fileName : file.name,
        }
        console.log(this.uploadFromData)
      },
      envConfigsChange(name,v){
        this.formData.varsInfo = v ;
        // this.concatVarsInfo()
      },
      // concatVarsInfo(){
      //   this.formData.varsInfo = [
      //     ...this.formData.varsInfoEnv,
      //   ]
      // },
      changeAppType(name,v){
        console.log(name,v)
        this.formData.appType = v ;
        // 根据组件类型获取组件发布模式
        deploymodels({appType : v }).then(ret=>{
          console.log(ret)
          if(ret&&ret.code == 0){
            if(ret.data.length){
              this.deployModelList = ret.data
              this.formData.modelName = ret.data[0].modelName
            }else{
              // 没有模式 默认单机
              this.formData.deployModel  = 0
              this.formData.deployInstCounts  = 1
            }
          }
        })
      },
      // 选择发布模式
      changeDeployModel(v){
        this.deployModelList.forEach(el=>{
           if(el.modelName == v){
             this.formData.deployModel = el.deployModel
             this.formData.instCounts = el.instCounts
           }
        })
      },
      confirmAdd(){
          this.$refs.RuleFrom.validate((valid) => {
              if (valid) {
                this.submitAdd();
              } else {
                setTimeout(()=>{
                  this.open();
                },50)
                return false;
              }
          })
      },
      submitAdd(){
          // for(var key in this.formData){
          //       delete this.formData['varsInfoEnv'];
          //     }
          let params = {...this.formData}
          params.templateType = 2
          params.deployType = 2
          params.resourceUrl  = 'file://' + this.uploadFromData.filePath
          params.repositoryType = this.uploadFromData.repositoryType
          params.varsInfo = this.formData.varsInfo.filter(el=>el.varsName != '')
          console.log(params)
          // 构建组件
          build(params).then(ret=>{
            if(ret&&ret.code == 0){
              this.$message({ message: '创建成功',type: 'success', duration : 2000,});
              this.$emit("addSucess")
              this.close()
            }else{
              this.close()
            }
          })
      },
      cancleAdd(){
          this.close()
      },
      // 表单重置
      initFrom(){
        setTimeout(()=>{
          console.log(6666, this.$refs)
          for(let i in this.$refs){
            let ref = this.$refs[i]
            if(ref.reset){
              ref.reset();
            }
          }
        },90)
      },
      close(){
        this.initFrom();
        this.uploadFromData.fileName = '',
        this.formData.filePath = ''
        this.$refs.dialog.close();
        this.$refs.RuleFrom.clearValidate(['appType','name','appVersion','filePath'])
      },
      open(){
        this.initFrom()
        this.$refs.dialog.open();
      },
      handleGetFile(){
        this.$refs.uploaddialog.open()
      },
      addSucess(data){
        this.formData.filePath = data.mntPath
        this.uploadFromData= {
          repositoryType : "file",
          filePath : data.mntPath,
          fileName : data.name,
        }
      }
    }
  }
</script>


<style scoped>

</style>